<template>
  <div class="detail">
   <mt-header :title="list.name" fixed>
  <router-link to="/" slot="left">
    <mt-button icon="back"></mt-button>
  </router-link>
  <mt-button slot="right" @click="goshare()">分享</mt-button>
</mt-header>
<div class="det_head">
<div class="det_head_fir">
  <span>{{list.profit}}%</span>
  <p>{{list.type==1?"固定年化收益率":list.type==2?"预计年化收益率":""}}</p>
</div>
<div class="det_head_sec">
  <span>{{list.dayType}}天</span>
  <p>锁定期</p>
</div>
</div>
<div class="det_bq">
  <span>钱包存管</span>
  <span>资产保值系统</span>
  <span>安全等级A</span>
</div>
<div class="det_num">
    <div class="det_num_h">
      <span>{{list.coinType}}锁仓数量&nbsp;&nbsp;&nbsp;&nbsp;{{list.totalAmountView-list.surplusAmountView}}</span>
      <span>{{list.purchaseCountView}}人参与</span>
    </div>
    <div class="det_count">
      <mt-progress :value="20" :bar-height="10"></mt-progress>
    </div>
</div>
<div class="det_num_list">
  <ul>
    <li>
      <span>抢购总额度</span>
      <span>{{list.totalAmountView}}</span>
    </li>
    <li>
      <span>剩余额度</span>
      <span>{{list.surplusAmountView}}</span>
    </li>
    <li>
      <span>单次抵扣数</span>
      <span>{{list.quantity}}</span>
    </li>
  </ul>
</div>
<div>
  <div>
    <mt-cell
      title="产品特点"
      to=""
      is-link
      :value="list.depict">
    </mt-cell>
  </div>
<div>
    <mt-cell
    title="产品详情"
    to=""
    is-link
    :value="list.detail">
  </mt-cell>
</div>
</div>
<div class="det_pro">
  <div class="det_pro_title">常见问题</div>
  <div class="det_pro_qa">
    <p><span>Q</span>是的发送到发的</p>
    <p><span>A</span>ahighiagikah</p>
  </div>
</div>
<div class="det_btnbg">
  <button  @click="buy()">
    立即赚币{{status[list.status]}}
  </button>
  <a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=在线客服&menu=yes">点击这里给我发消息</a>  
  <a href='http://wpa.qq.com/msgrd?V=1&Uin=123456&Site=在线咨询&Menu=yes' title='在线即时交谈'>在线即时交谈</a>  
  <a href="mqqwpa://im/chat?chat_type=wpa&uin=123456&version=1&src_type=web&web_src=oicqzone.com">咨询客服</a>  //app  
  <a href="weixin://">微信app</a> 
</div>
<div class="pay-bg" v-if="flag">
        <div class="pay-tool">
            <div class="pay-tool-title border-bottom">
            <span  @click="backHandle()" class="iconfont icon-zuo"></span><strong>请输入交易密码</strong>
            </div>
            <div class="pay-tool-content">
            <div class="pay-tool-inputs">
                <div class="item" v-for="(i,key) in items" :key="key"><span class="icon_dot" v-if="password[i]"></span></div>
            </div>
            </div>
            <div class="pay-tool-keyboard">
            <ul>
                <li @click="keyUpHandle($event)" v-for="(val,key) in keys" :key="key">
                {{ val }}
                </li>
                <li class="del" @click="delHandle"><span class="icon-del" style="font-size:14px">回退</span></li>
            </ul>
        </div>
     </div>
   </div>
<mt-popup
        v-model="popupVisible">
        <div class="d_fade">
          <div class="df_h">{{list.coinType}} {{list.name}}</div>
        <div><input type="text" placeholder="请输入投资额度" v-model="quantity"></div>
        <div class="detpop_btnbg">
          <button @click="close()">取消</button>
          <button @click="dopost(quantity)">提交</button>
          </div>
        </div>
      </mt-popup>
      <!-- <div class="sharebg" v-if="shareflag">
        <div class="sharebox">
          <div class="sharecontent">
            <div class="share_head">分享到</div>
            <div class="sharebtn">
              
              <div><img src="../assets/wechat-button.png" alt="微信"></div>
              <div><img src="../assets/pengyouquan-button.png" alt="朋友圈"></div>
            </div>
          </div>
          <div class="stopshare" @click="closeshare()">取消</div>
        </div>
      </div> -->
  </div>
</template>
<script>
import soshm from "soshm";
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0];
import { Header, Progress, Popup, Toast, MessageBox } from "mint-ui";
import { productDetail, purchase, userInfo, signature } from "../api/api.js";
import {
  commonShare,
  shareTitle,
  shareUrl,
  shareImg,
  shareDesc
} from "../common/share.js";

export default {
  name: "Detail",
  data() {
    return {
      msg: "",
      selected: "detail",
      id: "",
      list: "",
      popupVisible: false,
      quantity: "",
      flag: false,
      status: "",
      phone: "",
      items: [0, 1, 2, 3, 4, 5],
      keys: keys(),
      password: [],
      // shareflag: false,
      sharelist: {},
      status = {
        2:"本期已售罄",
        3:"本期已售罄",
        5:"本期已结束"
      }
    };
  },
  computed:{
    //:class="list.status  det_btn"
    getText(){
      let status = {
        2:"本期已售罄",
        3:"本期已售罄",
        5:"本期已结束"
      }
      console.log(status[this.list.status])
      return status[this.list.status];
    }
  },
  methods: {
    backHandle() {
      this.flag = false;
    },
    keyUpHandle(e) {
      let text = e.currentTarget.innerText;
      let len = this.password.length;
      if (!text || len >= 6) return;
      this.password.push(text);
      this.ajaxData();
    },
    delHandle() {
      if (this.password.length <= 0) return false;
      this.password.shift();
    },
    ajaxData() {
      if (this.status == 1) {
        this.password = [];
        MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
          action => {
            this.$router.push({ path: "/pay/" + this.mobilephone });
          }
        );
      } else if (this.status == 2) {
        if (this.password.length >= 6) {
          let para = {
            productId: this.id,
            userId: JSON.parse(sessionStorage.getItem("user")).id,
            token: JSON.parse(sessionStorage.getItem("token")),
            quantity: this.quantity,
            payPwd: parseInt(this.password.join(" ").replace(/\s/g, ""))
          };
          purchase(para)
            .then(res => {
              Toast({
                message: res.msg,
                position: "bottom",
                duration: 5000
              });
              this.flag = false;
              this.password = [];
              this.quantity = "";
              if (res.code == 200) {
                this.popupVisible = false;
              }
            })
            .catch(err => {
              Toast({
                message: "请求超时",
                position: "bottom",
                duration: 5000
              });
            });
        }
      }
      return false;
    },
    getDetail(ev) {
      let para = {
        id: this.id,
        token: sessionStorage.getItem("token")
      };
      productDetail(para)
        .then(res => {
          this.list = res.data;
          // console.log(this.list);
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    goshare() {
      soshm.popIn({
        url:"http://192.168.1.72:8081/coin/html/share.html",
        title: "币金所",
        pic:"../assets/share.png",
        sites: [
          "weixin",
          "weixintimeline",
          // "weibo",
          // "yixin",
          // "qzone",
          // "tqq",
          "qq"
        ]
      });
      // this.shareflag = true;
      document.documentElement.style.overflow = "hidden";
      document.addEventListener(
        "touchmove",
        function(event) {
          event.preventDefault();
        },
        false
      );
      var box = document.getElementsByClassName("soshm-pop-sites")[0];
      box.style.background = "#FFF";
      box.style.position = "fixed";
      box.style.bottom = "0";
      // box.style.top="-100%";
      box.style.transform = "none";
      box.style.top = "auto";
      var pa = document.createElement("div");
      pa.style.textAlign='center';
      pa.style.height='50px';
      pa.style.lineHeight='50px';
      pa.style.borderTop='1px solid #e6e6e6';
      var group=document.getElementsByClassName('soshm-group')[0];
      group.style.padding="30px 50px";
      var node = document.createTextNode("取消");
      pa.click=function(){
        document.getElementsByClassName('soshm-pop')[0].style.display="none";
      };
      pa.appendChild(node);
      box.appendChild(pa);
      // this.$router.push({ path: "/share" });
      let para = {
        url: "http://192.168.1.72:8081/coin/html/share.html",
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : ""
      };
      signature(para)
        .then(res => {
          // console.log(res);
          this.sharelist = res;
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    dopost(d) {
      if (d) {
        this.flag = true;
      } else {
        Toast({
          message: "请先输入投资额度",
          position: "bottom",
          duration: 5000
        });
      }
    },
    buy() {
      if (sessionStorage.getItem("user")) {
        this.popupVisible = true;
        this.getuser();
      } else {
        MessageBox.confirm("您还没有登录，去登录？").then(action => {
          this.$router.push({ path: "/login" });
        });
      }
    },
    close() {
      this.popupVisible = false;
    },
    closeshare() {
      // this.shareflag = false;
      document.documentElement.style.overflow = "auto";
      document.addEventListener(
        "touchmove",
        function(e) {
          e.returnValue = true;
        },
        false
      );
    },
    getuser() {
      let para = {
        id: sessionStorage.getItem("user")
          ? JSON.parse(sessionStorage.getItem("user")).id
          : "",
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : ""
      };
      userInfo(para)
        .then(res => {
          this.status = res.data.statusPay;
          if (res.data.statusPay == 1) {
            this.flag = false;
            this.phone = res.data.mobilephone;
            MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
              action => {
                this.$router.push({ path: "/pay/" + res.data.mobilephone });
              }
            );
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getDetail();
    // window.onload = function () {  
  
                var as = document.getElementsByTagName('a');  
  
                var kefu101 = "http://wpa.qq.com/msgrd?v=3&uin=381232999&site=oicqzone.com&menu=yes";  
                var kefu102 = "mqqwpa://im/chat?chat_type=wpa&uin=381232999&version=1&src_type=web&web_src=oicqzone.com";  
  
               
                    as.onclick = function (i) {  
                        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || /(Android)/i.test(navigator.userAgent)) {  
  
                            window.open(kefu102);  
                        }else {  
                window.open(kefu101);  
                        }  
                      
                    }  
                  
            // };  
    // commonShare(this, shareTitle, shareUrl, shareImg, shareDesc);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/detail.css");
@import url("../../static/css/pay.css");
.soshm-pop-sites {
  background: #fff !important;
}
</style>
